<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米商城</title>
		<link rel="stylesheet"href="./css/xiaomi.css">
	</head>
	<body>
		<!-- 黑色模块start -->
		<div class="black-nav">
			<div class="wrap">
				<ul class="black-nav-left"> 
					<li><a href="#">小米官网</a><span>|</span></li>
					<li><a href="#">小米商城</a><span>|</span></li>
					<li><a href="#">小米澎湃OS</a><span>|</span></li>
					<li><a href="#">小米澎湃OS</a><span>|</span></li>
					<li><a href="#">云服务</a><span>|</span></li>
					<li><a href="#">loT</a><span>|</span></li>
					<li><a href="#">有品</a><span>|</span></li>
					<li><a href="#">小爱开放平台</a><span>|</span></li>
					<li><a href="#">资质证照</a><span>|</span></li>
					<li><a href="#">协议规则</a><span>|</span></li>
					<li><a href="#">下载app</a><span>|</span></li>
					<li><a href="#"> Select Location</a><span>|</span></li>
				</ul>
				<ul class="black-nav-right">
					<li><a href="#">登录</a><span>|</span></li>
					<li><a href="#">注册</a><span>|</span></li>
					<li><a href="#">消息通知</a><span>|</span></li>
					<li class="calt"><a href="#">购物车(0)</a></li>
				</ul>
			</div>
		</div>
		<!-- 白色模块start -->
		<div class="white-nav">
		<div class="wrap">
			<ul>
				<li><a href="#">xiaomi手机</a></li>
				<li><a href="#">Redmi手机</a></li>
				<li><a href="#">电视</a></li>
				<li><a href="#">笔记本</a></li>
				<li><a href="#">平板</a></li>
				<li><a href="#">家电</a></li>
				<li><a href="#">路由器</a></li>
				<li><a href="#">服务中心</a></li>
				<li><a href="#">社区</a></li>
				
			</ul>
		</div> 
		</div>
		<!-- banner模块start -->
		<div class="banner">
			<div class="wrap">
				<img class="banner-img" src="img/2.webp">
				<div class="slide">
					<ul>
						<li><a href="#">手机<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">电视<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">电脑<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">笔记本 平板<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">出行 穿戴<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">耳机 音箱<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">健康 儿童<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">生活 箱包<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">智能 路由器<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">电源 配件<i class="iconfont">&#xe621;</i></a></li>
					</ul>
				</div>
				
			</div>
		</div>
		<!-- 广告模块start -->
		<div class="ad">
			<div class="wrap">
				<div class="ad-aside">
					<ul>
						<li>
							<a href="#">
								<i class="iconfont">&#xe733;</i>
								<p>米粉卡</p>
							</a>
						</li>
						<li>	
							<a href="#">
								<i class="iconfont">&;</i>
								<p>米粉卡</p>
							</a>
						</li>
						<li>
							<a href="#">
								<i class="iconfont">&;</i>
								<p>米粉卡</p>
							</a>
						</li>
						<li>	
							<a href="#">
								<i class="iconfont">&;</i>
								<p>米粉卡</p>
							</a>
						</li>
						<li>	
							<a href="#">
								<i class="iconfont">&;</i>
								<p>米粉卡</p>
							</a>
						</li>
						<li>	
							<a href="#">
								<i class="iconfont">&;</i>
								<p>米粉卡</p>
							</a>
						</li>
					</ul>
				</div>
				
			
					<div class="ad-img1"></div>
					<div class="ad-img2"></div>
					<div class="ad-img3"></div>
		</div>	
		<div class="content">
			<div class="wrap">
				<!-- 手机模块 -->
				<h3 class="title">手机</h3>
				<div class="phone-box">
					<div class="phone-box-left">
						<a href="3"></a>
					</div>	
					<div class="phone-box-right">
						<div class="item">
							<a href="#">
								
								<p class="item-name">标题文本</p>
								<p class="item-desc">描述文本</p>
								<p class="item-prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
					</div>
				</div>
				<h3 class="title">智能穿戴</h3>
				<div class="phone-box">
					<div class="phone-box-left">
						<a href="3"></a>
					</div>	
					<div class="phone-box-right">
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
					</div>
				</div>
				<h3 class="title">笔记本|平板</h3>
				<div class="phone-box">
					<div class="phone-box-left">
						<a href="3"></a>
					</div>	
					<div class="phone-box-right">
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
					</div>
				</div>
				<h3 class="title">家电</h3>
				<div class="phone-box">
					<div class="phone-box-left">
						<a href="3"></a>
					</div>	
					<div class="phone-box-right">
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
					</div>
				</div>
				<h3 class="title">生活电器</h3>
				<div class="phone-box">
					<div class="phone-box-left">
						<a href="3"></a>
					</div>	
					<div class="phone-box-right">
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
					</div>
				</div>
				<h3 class="title">智能家具</h3>
				<div class="phone-box">
					<div class="phone-box-left">
						<a href="3"></a>
					</div>	
					<div class="phone-box-right">
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
						<div class="item">
							<a href="#">
								
								<p class="name">标题文本</p>
								<p class="desc">描述文本</p>
								<p class="prise">价格文本</p>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>	
		
	</body>	
</html>	
		
		
		
		
	

